import React, { useState } from 'react'
import styles from './step2.less'
import step2Img from '../../../assets/enquiry/step2H.png'
import completed from '../../../assets/enquiry/completed.png'
import { useForm } from 'react-hook-form';
import { useIntl } from 'umi';
function Step2({ onNext, submit }) {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const [focusIndex, setFocusIndex] = useState(1)

  function onSubmit(data) {
    submit(data)
  }
  const intl = useIntl();
  return (
    <div className={styles.box}>
      <div className={styles.header}>
        <img src={step2Img} className={styles.step2}></img>
        <img src={completed} className={styles.completed}></img>
      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <div className={styles.item}>
            <div className={styles.itemInputBox}>
              <span>{intl.formatMessage({id:"INQUIRIES"})}</span>
              <input {...register('quantity', { required: true })} autoFocus={focusIndex == 1} />
            </div>
            {errors.name && <p>{intl.formatMessage({id:"PLEASE_ENTER_THE_QUANTITY"})}</p>}
          </div>

          <div className={styles.item}>
            <div className={styles.itemInputBox}>
              <span>预计下单时间</span>
              <input type="date" {...register('tradingTime', { required: true })} autoFocus={focusIndex == 1} />
            </div>
            {errors.name && <p>请输入数量。</p>}
          </div>

          <div className={styles.item} >
            <div className={styles.itemInputBox} style={{ border: 'none' }}>
              <span>{intl.formatMessage({id:"ENQUIRIES_ARE_DESCRIBED"})}</span>
            </div>
            <textarea {...register('description', { required: true })} placeholder={intl.formatMessage({id:"ENTER_A_DESCRIPTION_HERE"})} autoFocus={focusIndex == 1} />
            {errors.name && <p>{intl.formatMessage({id:"PLEASE_ENTER_A_DESCRIPTION"})}</p>}
          </div>
        </div>

        <button className={styles.button} type="submit" style={{ minHeight: 44 }}>下一步</button>
      </form>

    </div>
  )
}

export default Step2
